<template>
<div class="login-container">
  <div style="opacity: 0.6;background: #000000;width: 100%;height:40px" >
    <img src="../../assets/cn.png" style="opacity: 100%;height:30px;margin-left: 180px;margin-top: 5px">
  </div>

  <div  class="div-another" style="margin-top: 55px;margin-right: 30px">
    <el-card class="login-box">
      <el-card class=".el-button">
  <el-card>

    <template slot="header">
      菜鸟裹裹-系统登录
    </template>
    <el-form style="position: relative;">

      <el-form-group>
        <el-form-item label="用户名" label-width="60px">
          <i class="el-icon-user-solid" style="position: absolute;top:40%;left: -33%"></i>
              <el-input v-model="form.username"  placeholder="会员名/手机号/邮箱"></el-input>
        </el-form-item>
      </el-form-group>

      <el-form-group>
        <el-form-item label="密码" label-width="60px">
          <i class="el-icon-unlock" style="position: absolute;top:40%;left: -31%"></i>
          <el-input v-model="form.password" show-password placeholder="请输入登录密码"></el-input>
        </el-form-item>

      </el-form-group>

      <el-form-group>
        <el-form-item >
          <el-button type="success" @click="loginHandle">登录</el-button>
        </el-form-item>
      </el-form-group>

    </el-form>
  </el-card>
      </el-card>
    </el-card>
    <div v-show="errMsg.isShow">{{errMsg.message}}</div>
  </div>
</div>
</template>
<div class="demo-image">
  <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration">{{ fit }}</span>
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit"></el-image>
  </div>
</div>

  <script>
  export default {
    name: "Login4",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },errMsg:{
          message:'用户名或者密码错误!',
          isShow:false
        }
      }
    }, methods: {
      loginHandle() {
        var _this = this;
        this.axios({
          url:'http://localhost:3000/user/login',
          method:'post',
          data:{
            username: this.form.username,
            password: this.form.password
          }
        }).then(function (res) {
          if (res.data.flag){
            _this.$router.push('/admin/')
          } else {
            _this.$message({
              type:'error',
              message:'用户名或者密码错误!'
            })
          }
        })
        /*
    data(){
      return{
        form:{
          username:'',
          password:''
        }
      }
    },methods:{
      loginHandle(){
        alert("username:"+this.form.username
          +"------password:"+this.form.password);*/
      }
    }
  }
</script>

<style scoped>

  .login-container {
    background-image: url("../../assets/登录界面背景.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    height: 100%;
    width: 100%;

  }
 .div-another{
   width: 400px;
   margin-top:60px;
   margin-left: 850px;
 }
  .login-box {
    width: 400px;
    height: 390px;
    margin-left: 20px;
    margin-top: 90px;
    background-color: rgba(0, 0, 0, .4);
    box-shadow: -11px 9px 11px 0px #b9bfbd;
    opacity: 100;
    border-radius: 12px;
    color: blue;
    font-size: 1.2em;
    font-weight: bolder;
  }
  .el-button{
    margin-top: 20px;
    margin-left:60px;
    width: 60%;
    background-color:blue ;
  }
  </style>
